<template>
  <!-- 条件渲染 -->
  <view class="goods-detail" v-if="goods">
    <!-- 1.0 轮播图 -->
    <u-swiper
      @click="onPreviewImage"
      keyName="pics_big"
      indicator
      indicatorMode="line"
      circular
      height="750rpx"
      :list="goods.pics"
    ></u-swiper>
    <!-- 1.0 轮播图 -->

    <!-- 2.0 价格和名称 -->
    <view class="goods-info">
      <view class="goods-price">￥{{ goods.goods_price }}</view>
      <view class="goods-name">{{ goods.goods_name }}</view>
    </view>
    <!-- 2.0 价格和名称 -->

    <!-- 3.0 图文详情 -->
    <view class="goods-introduce">
      <view class="goods-introduce-title">图文详情</view>
      <view class="goods-introduce-content">
        <!-- uview也提供另外一个富文本标签  -->
        <!-- uview 2.0 版本 现在还是有坑！！！  -->
        <rich-text :nodes="goods.goods_introduce"></rich-text>
        <!-- <u-parse :content="goods.goods_introduce"></u-parse> -->
      </view>
    </view>
    <!-- 3.0 图文详情 -->

    <!-- 4.0 购物车栏 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator class="item car" url="/pages/cart/cart" open-type="switchTab">
          <view style="display: inline-block; position: absolute; right: 0; top: 0">
            <u-badge type="error" :value="cartNum"></u-badge>
          </view>
          <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="onAddCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
    <!-- 4.0 购物车栏 -->
  </view>
</template>

<script>
  export default {
    computed: {
      cartNum() {
        let sum = 0
        this.$store.state.cartList.forEach(goods => {
          sum += goods.nums
        })
        return sum
      }
    },
    data() {
      return {
        // 对象格式！！！
        goods: null
      }
    },
    async onLoad({ goods_id }) {
      // 记得后期需要删除！！！
      goods_id = goods_id || 26948
      const res = await uni.$u.http.get('/goods/detail', {
        params: { goods_id }
      })
      this.goods = res.message
    },
    methods: {
      // 点击加入购物
      onAddCart() {
        // 获取当前要购买的商品信息
        // console.log(this.goods);
        // vuex中的购物车数组
        const cartList = this.$store.state.cartList
        // 判断当前商品是否在以前选购过 id做判断
        const index = cartList.findIndex(goods => goods.goods_id === this.goods.goods_id)

        if (index === -1) {
          // 没有找到 数组添加一个元素进去！！！ 自己添加多两个属性 选中状态和购买数量
          cartList.push({ ...this.goods, checked: true, nums: 1 })
        } else {
          console.log('找到啦')
          cartList[index].nums++
        }

        // 把数据 设置到 vuex中。。。 mutation
        this.$store.commit('setCartList', cartList)
      },

      // 点击轮播图 放大预览图片
      onPreviewImage(index) {
        // urls 想要预览的所有的图片路径
        const urls = this.goods.pics.map(v => v.pics_big)
        // 点击之后想要立即预览的图片路径
        const current = urls[index]
        // 开始预览图片
        uni.previewImage({
          urls,
          current
        })
      }
    }
  }
</script>

<style lang="scss">
.goods-detail {
  padding-bottom: 102rpx;
  .goods-info {
    padding: 15rpx;
    .goods-price {
      font-size: 32rpx;
      color: #eb4450;
    }

    .goods-name {
      color: #666;
    }
  }
  .goods-introduce-title {
    text-align: center;
    padding: 20rpx 0;
    color: #666;
  }
  .navigation {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    margin-top: 100rpx;
    border: solid 2rpx #f2f2f2;
    background-color: #ffffff;
    .left {
      display: flex;
      font-size: 20rpx;
      .item {
        margin: 0 30rpx;
        &.car {
          text-align: center;
          position: relative;
          .car-num {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      .btn {
        line-height: 66rpx;
        padding: 0 30rpx;
        border-radius: 36rpx;
        color: #ffffff;
      }
      .cart {
        background-color: #ed3f14;
        margin-right: 30rpx;
      }
      .buy {
        background-color: #ff7900;
      }
    }
  }
}
</style>